<template>
	<div class="app-container">
		<el-main>
			<div class="search">
				<el-form ref="searchForm" size="mini" :inline="true" :model="searchForm" class="form-inline">
					<el-form-item label="名称：" prop="name">
						<el-input clearable v-model.trim="searchForm.name" placeholder="请输入名称" />
					</el-form-item>
					<!-- <el-form-item label="状态：" prop="status">
            <el-select clearable v-model="searchForm.status" placeholder="请选择状态">
              <el-option label="启用" :value="1"></el-option>
              <el-option label="禁用" :value="0"></el-option>
            </el-select>
          </el-form-item> -->
					<el-form-item>
						<el-button type="primary" plain @click="searchSubmit('searchForm')">搜索</el-button>
						<el-button type="info" plain @click="searchReset">重置</el-button>
					</el-form-item>
				</el-form>
			</div>

			<el-row :gutter="20" type="flex" align="center">
				<el-col>
					<el-button type="primary" size="small" @click.native="showAdd()" v-permission="'dict_add'">新增
					</el-button>
					<!-- <el-button type="danger" size="small" :disabled="!selectIds.length>0" @click.native="onDel()">删除 </el-button>-->
				</el-col>
			</el-row>

			<el-table stripe size="mini" ref="multipleTable" v-loading="tabLoading" :data="tableData"
				tooltip-effect="dark" style="width: 100%" :row-key="getRowKeys" border highlight-current-row
				:expand-row-keys="expands" row-key="id">
				<!-- <el-table-column type="selection" width="55" align="center" /> -->
				<el-table-column type="index" label="序号" width="50" />
				<el-table-column prop="name" label="名称" show-overflow-tooltip />
				<el-table-column prop="code" label="编码" show-overflow-tooltip />
				<el-table-column prop="memo" label="备注" show-overflow-tooltip />
				<el-table-column prop="sort" label="排序" width="120" show-overflow-tooltip sortable />
				<!-- <el-table-column prop="status" label="启用" align="center" width="120">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="changeStatus($event,scope.row)" />
          </template>
        </el-table-column> -->
				<el-table-column label="操作" width="280px" align="center">
					<template slot-scope="scope">
						<div class="operation">
							<el-button type="primary" icon="el-icon-circle-plus-outline" size="mini"
								@click.native="showAdd(scope.row)" v-if="scope.row.pid===0"
								v-permission="'dict_add_2nd'">新增二级</el-button>
							<el-button type="success" icon="el-icon-files" size="mini"
								@click.native="showDetail(scope.row)" v-if="scope.row.level===2">数据</el-button>
							<el-button type="primary" icon="el-icon-edit-outline" size="mini"
								@click.native="showEdit(scope.row)" v-permission="'dict_edit'">编辑</el-button>
							<el-button type="danger" icon="el-icon-delete" size="mini"
								@click.native="onDel(scope.row.id,scope.row.children)">删除</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</el-main>

		<el-dialog :close-on-click-modal="false" :title="(cuForm.id?'编辑':'新增')" center :visible.sync="dialogCU"
			width="40%" @close="dialogCUClose('cuForm')">
			<el-form ref="cuForm" v-loading="dialogCULoading" :rules="cuRules" :model="cuForm" label-width="120px"
				center>
				<el-row class="row-bg">
					<el-col :span="22">
						<el-form-item label="等级" prop="type">
							<el-row type="flex">
								<el-tag v-if="cuForm.pid===0">一级</el-tag>
								<el-tag v-else-if="cuForm.level===2">二级</el-tag>
								<el-tag v-else-if="cuForm.level===3">三级</el-tag>
								<el-tag v-else-if="cuForm.level===4">四级</el-tag>
								<el-tag type="success" v-else>五级</el-tag>
							</el-row>
						</el-form-item>
						<el-form-item label="名称" prop="name">
							<el-col :span="24">
								<el-input clearable v-model.trim="cuForm.name" placeholder="请输入名称" />
							</el-col>
						</el-form-item>
						<!-- <el-form-item label="编码" prop="code" v-if="!cuForm.id || cuForm.level==3">
              <el-col :span="24">
                <el-input clearable v-model.trim="cuForm.code" placeholder="请输入编码" />
              </el-col>
            </el-form-item> -->
						<el-form-item label="备注" prop="memo">
							<el-col :span="24">
								<el-input clearable type="textarea" v-model.trim="cuForm.memo" placeholder="请输入备注" />
							</el-col>
						</el-form-item>
						<el-form-item label="排序" prop="sort">
							<el-col :span="24">
								<el-input v-model.trim="cuForm.sort" type="number" placeholder="请输入排序" />
							</el-col>
						</el-form-item>
						<el-form-item label="启用/禁用:" prop="status" v-if="cuForm.level===3">
							<el-col :span="20">
								<el-switch v-model="cuForm.status" :active-value="1" :inactive-value="0"
									active-text="启用" inactive-text="禁用"></el-switch>
							</el-col>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click.native="dialogCU=false">取 消</el-button>
				<el-button type="primary" @click.native="onSubmit(cuForm.id)">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 弹出框-3级字典列表 -->
		<el-dialog :close-on-click-modal="false" :title="dialogTitle+'字典列表'" center :visible.sync="dialogTable"
			width="80%" @close="dialogCUClose()">
			<div class="search">
				<el-form ref="searchFormDialog" :inline="true" :model="searchFormDialog" class="form-inline">
					<el-form-item label="名称：" prop="name">
						<el-input clearable v-model.trim="searchFormDialog.name" placeholder="请输入名称" />
					</el-form-item>
					<el-form-item label="状态：" prop="status">
						<el-select filterable clearable v-model="searchFormDialog.status" placeholder="请选择状态">
							<el-option label="启用" :value="1"></el-option>
							<el-option label="禁用" :value="0"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="searchSubmitDialog('searchFormDialog')">搜索</el-button>
						<el-button type="info" @click="searchResetDialog">重置</el-button>
					</el-form-item>
				</el-form>
			</div>

			<el-row :gutter="20" type="flex" align="center">
				<el-col>
					<el-button type="primary" plain round size="small" @click.native="showAddDialog()"
						v-permission="'dict_add_3rd'">新增</el-button>
					<!-- <el-button type="danger" plain round size="small" :disabled="!selectIds.length>0" @click.native="onDel()">删除 </el-button>-->
				</el-col>
			</el-row>

			<el-table stripe ref="multipleTable" :data="tableDataDialog" tooltip-effect="dark" v-loading="tabLoading"
				style="width: 100%" :row-class-name="tableRowClassName" border
				:default-sort="{prop: 'date', order: 'descending'}" highlight-current-row
				@selection-change="handleSelectionChange" row-key="id">
				<!-- <el-table-column type="selection" width="55" align="center" /> -->
				<el-table-column type="index" label="序号" width="50">
					<template slot-scope="scope">
						<span>{{(listParamsDialog.pageNum - 1) * listParamsDialog.pageSize + scope.$index + 1}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="名称" show-overflow-tooltip />
				<el-table-column prop="code" label="编码" show-overflow-tooltip />
				<el-table-column prop="memo" label="备注" show-overflow-tooltip />
				<el-table-column prop="sort" label="排序" width="120" show-overflow-tooltip sortable />
				<el-table-column prop="status" label="启用" align="center" width="120">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
							@change="changeStatus($event,scope.row)" v-permission-disabled="'dict_switch_3rd'" />
					</template>
				</el-table-column>
				<el-table-column label="操作" width="280px" align="center">
					<template slot-scope="scope">
						<div class="operation">
							<el-button type="success" icon="el-icon-files" size="mini"
								@click.native="showDetail2(scope.row)" v-if="scope.row.level===3">数据</el-button>
							<el-button type="primary" icon="el-icon-edit-outline" size="small"
								@click.native="showEdit(scope.row)" v-permission="'dict_edit_3rd'">编辑</el-button>
							<el-button type="danger" icon="el-icon-delete" size="small"
								@click.native="onDel(scope.row.id,scope.row.children)">删除</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页数据 -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page.sync="current" :page-sizes="[10, 20, 50, 100, 200, 500]"
				:page-size="listParamsDialog.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
			<span slot="footer" class="dialog-footer"></span>
		</el-dialog>
		
		<!-- 弹出框-4级字典列表 -->
		<el-dialog :close-on-click-modal="false" :title="dialogTitle4+'字典列表'" center :visible.sync="dialogTable4"
			width="80%" @close="dialogCUClose()">
			<div class="search">
				<el-form ref="searchFormDialog4" :inline="true" :model="searchFormDialog4" class="form-inline">
					<el-form-item label="名称：" prop="name">
						<el-input clearable v-model.trim="searchFormDialog4.name" placeholder="请输入名称" />
					</el-form-item>
					<el-form-item label="状态：" prop="status">
						<el-select filterable clearable v-model="searchFormDialog4.status" placeholder="请选择状态">
							<el-option label="启用" :value="1"></el-option>
							<el-option label="禁用" :value="0"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="searchSubmitDialog4('searchFormDialog4')">搜索</el-button>
						<el-button type="info" @click="searchResetDialog4">重置</el-button>
					</el-form-item>
				</el-form>
			</div>
		
			<el-row :gutter="20" type="flex" align="center">
				<el-col>
					<el-button type="primary" plain round size="small" @click.native="showAddDialog4()">新增</el-button>
				</el-col>
			</el-row>
		
			<el-table stripe ref="multipleTable" :data="tableDataDialog4" tooltip-effect="dark" v-loading="tabLoading"
				style="width: 100%" :row-class-name="tableRowClassName" border
				:default-sort="{prop: 'date', order: 'descending'}" highlight-current-row row-key="id">
				<el-table-column type="index" label="序号" width="50">
					<template slot-scope="scope">
						<span>{{(listParamsDialog4.pageNum - 1) * listParamsDialog4.pageSize + scope.$index + 1}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="名称" show-overflow-tooltip />
				<el-table-column prop="code" label="编码" show-overflow-tooltip />
				<el-table-column prop="memo" label="备注" show-overflow-tooltip />
				<el-table-column prop="sort" label="排序" width="120" show-overflow-tooltip sortable />
				<el-table-column prop="status" label="启用" align="center" width="120">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
							@change="changeStatus($event,scope.row)" />
					</template>
				</el-table-column>
				<el-table-column label="操作" width="280px" align="center">
					<template slot-scope="scope">
						<div class="operation">
							<el-button type="primary" icon="el-icon-edit-outline" size="small"
								@click.native="showEdit(scope.row)">编辑</el-button>
							<el-button type="danger" icon="el-icon-delete" size="small"
								@click.native="onDel(scope.row.id,scope.row.children)">删除</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
		
			<!-- 分页数据 -->
			<el-pagination @size-change="handleSizeChange4" @current-change="handleCurrentChange4"
				:current-page.sync="current4" :page-sizes="[10, 20, 50, 100, 200, 500]"
				:page-size="listParamsDialog4.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total4">
			</el-pagination>
			<span slot="footer" class="dialog-footer"></span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		index_list,
		index_list3rd,
		index_list4th,
		add,
		edit,
		del,
		change_status
	} from '@/api/business/setting/dict'
	import {
		Message
	} from 'element-ui';
	import {
		data2treeDG
	} from "@/utils/tree-utils.js";

	export default {
		components: {

		},
		data() {
			return {
				expands: [],
				getRowKeys(row) {
					return row.id;
				},
				hasSearch: false,
				// search form
				searchForm: {
					name: null,
					status: null,
				},
				// page option
				total: null, // 总页数
				current: 1, // 当前页

				// list table
				tableData: [], // 列表数据
				selectIds: [], // 多选选项id

				listParams: {
					name: null,
					status: null,
				}, // list参数
				tabLoading: true,
				// CU dialog
				dialogCULoading: false,
				dialogCU: false, // 增修弹框显示

				cuForm: {
					id: null,
					name: null,
					code: null,
					memo: null,
					level: 1,
					pid: 0,
					status: 1,
					sort: 1
				},
				cuRules: {
					name: [{
							required: true,
							message: '请输入名称',
							trigger: 'blur'
						},
						{
							max: 20,
							message: '最多允许输入20个字符串',
							trigger: 'blur'
						}
					],
					// code: [{
					//   required: true,
					//   message: '请输入编码',
					//   trigger: 'blur'
					// }, {
					//   max: 30,
					//   message: '最多允许输入30个字符串',
					//   trigger: 'blur'
					// }],
					memo: [{
						max: 150,
						message: '最多允许输入150个字符串',
						trigger: 'blur'
					}]
				},

				dialogTable: false,
				dialogTitle: '',
				// search form
				searchFormDialog: {
					name: null,
					status: null,
				},
				// list table
				tableDataDialog: [], // 列表数据
				listParamsDialog: {
					name: null,
					status: null,
					pid: null,
					pageNum: 1,
					pageSize: 10
				}, // list参数
				
				total4: null, // 总页数
				current4: 1, // 当前页
				dialogTable4: false,
				dialogTitle4: '',
				// search form
				searchFormDialog4: {
					name: null,
					status: null,
				},
				// list table
				tableDataDialog4: [], // 列表数据
				listParamsDialog4: {
					name: null,
					status: null,
					pid: null,
					pageNum: 1,
					pageSize: 10
				}, // list参数
			}
		},
		computed: {},
		created() {
			this.getList()
		},
		mounted: function() {},
		methods: {
			// 新增弹出框
			showAdd(row) {
				this.dialogCU = true
				this.dialogCULoading = false
				this.resetForm()
				if (row) {
					this.cuForm.level = 2
					this.cuForm.pid = row.id
				}
				this.$refs['cuForm'] && this.$refs['cuForm'].resetFields()
			},
			showEdit(row) {
				this.cuForm = Object.assign({}, row)
				this.dialogCU = true
				this.dialogCULoading = false
			},
			// 关闭弹窗
			dialogCUClose(formName) {
				switch (formName) {
					case 'cuForm':
						this.$refs['cuForm'].clearValidate()
						break
				}
			},

			resetForm() {
				this.cuForm = {
					id: null,
					name: null,
					code: null,
					memo: null,
					level: 1,
					pid: 0,
					status: 1,
					sort: 1
				}
			},
			// 提交数据 增、改
			onSubmit(id) {
				// 表单校验
				this.$refs.cuForm.validate(valid => {
					// ~ 校验通过
					if (valid) {
						var obj = Object.assign({}, this.cuForm)

						// if (!obj.image) {
						//   Message.error('请上传广告图片');
						//   return;
						// }

						// 显示loading
						this.dialogCULoading = true;

						// ~~ 修改
						if (id) {
							this.onEdit(obj);
						} else {
							// ~~ 添加
							delete obj.id
							this.onAdd(obj);
						}
					} else {
						// ~ 不通过
						return false;
					}
				});
			},
			// 添加
			onAdd(obj) {
				return add(obj)
					.then(res => {
						const {
							code,
							message
						} = res
						if (code === 200) {
							Message({
								message,
								type: 'success',
								duration: 1000
							})
							this.dialogCU = false
							if(this.dialogTable4){
								this.getList4th()
							} else if (this.dialogTable) {
								this.getList3rd()
							} else {
								this.getList()
							}
						}
						this.dialogCULoading = false
					})
					.catch(() => {
						this.dialogCULoading = false
					})
			},

			// 编辑
			onEdit(obj) {
				return edit(obj)
					.then(res => {
						const {
							code,
							message
						} = res
						if (code === 200) {
							Message({
								message,
								type: 'success',
								duration: 1000
							})
							this.dialogCU = false
							if(this.dialogTable4){
								this.getList4th()
							} else if (this.dialogTable) {
								this.getList3rd()
							} else {
								this.getList()
							}
						}
						this.dialogCULoading = false
					})
					.catch(() => {
						this.dialogCULoading = false
					})
			},
			// 删除
			onDel(id = false, children) {
				if (children && children.length) {
					this.$message.error('该分类存在子项，无法删除')
					return false
				}
				this.$confirm('确认要删除?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
						dangerouslyUseHTMLString: true
					})
					.then(() => {
						const ids = id ? [id] : this.selectIds
						del(ids).then(res => {
							const {
								code,
								date,
								message
							} = res
							this.getList()
							this.getList3rd()
							this.getList4th()
							Message({
								message,
								type: 'success',
								duration: 1000
							})
						})
					})
					.catch()
			},
			// 是否启用
			changeStatus(status, row) {
				const flag = +!status
				this.$confirm('确认要' + (status ? '启用' : '禁用') + '?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
						dangerouslyUseHTMLString: true
					})
					.then(() => {
						const ids = [row.id]
						return change_status(ids, status).then(res => {
							const {
								message
							} = res
							Message({
								message,
								type: 'success',
								duration: 1000
							})
						})
					}).catch(() => {
						row.status = flag
					})
			},
			// 获得table列表
			getList() {
				this.tabLoading = true
				return index_list(this.listParams)
					.then(res => {
						const {
							data
						} = res
						const list = data2treeDG(data, 0)
						console.log(list)
						this.tableData = list
						this.tabLoading = false
						// 搜索之后
						let expands = [];
						if (this.hasSearch) {
							for (var i in list) {
								var o = list[i]
								if (o.pid === 0) {
									expands.push(o.id + '')
								}
							}
						}
						this.expands = expands;
					})
					.catch(() => {
						this.tabLoading = false
					})
			},
			// 重置搜索表单
			searchReset() {
				const list = this.list,
					expands = this.expands
				this.$refs.searchForm.resetFields()
				const params = this.$refs.searchForm.model
				this.listParams = Object.assign(this.listParams, params)
				this.hasSearch = false
				this.getList()
			},
			// 搜索
			searchSubmit(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						const params = this.$refs[formName].model
						if (!params.name) params.name = null
						this.listParams = Object.assign(this.listParams, params)
						this.hasSearch = true
						this.getList()
					} else {
						console.log('error submit!!')
						return false
					}
				})
			},

			// 表单多选
			handleSelectionChange(val) {
				this.selectIds = val.map(item => item.id)
			},
			// 分页 -pageSize改变
			handleSizeChange(val) {
				this.listParamsDialog.pageSize = val
				this.getList3rd()
			},
			// 分页 -pageNum改变
			handleCurrentChange(val) {
				this.listParamsDialog.pageNum = val
				this.getList3rd()
			},
			// 分页 -pageSize改变
			handleSizeChange4(val) {
				this.listParamsDialog4.pageSize = val
				this.getList4th()
			},
			// 分页 -pageNum改变
			handleCurrentChange4(val) {
				this.listParamsDialog4.pageNum = val
				this.getList4th()
			},

			clickIcon(name) {
				this.cuForm.icon = name
			},

			clearIcon() {
				this.cuForm.icon = null
			},

			forArr(arr, isExpand) {
				arr.forEach(i => {
					this.$refs.multipleTable.toggleRowExpansion(i, isExpand)
					if (i.children) {
						this.forArr(i.children, isExpand)
					}
				})
			},

			expandAll() { // 默认展开全部的话，首次加载需要在$nextTick下进行
				this.forArr(this.tableData, true)
			},

			collapseAll() {
				this.forArr(this.tableData, false)
			},

			// 弹出框-列表
			showDetail(row) {
				const obj = {
					pid: row.id,
					pageNum: 1,
					pageSize: 10
				}
				this.dialogTable = true
				this.dialogTitle = row.name
				this.listParamsDialog = Object.assign(this.listParamsDialog, obj)
				this.current = 1
				this.getList3rd()
			},

			showDetail2(row) {
				const obj = {
					pid: row.id,
					pageNum: 1,
					pageSize: 10
				}
				this.dialogTable4 = true
				this.dialogTitle4 = row.name
				this.listParamsDialog4 = Object.assign(this.listParamsDialog4, obj)
				this.current4 = 1
				this.getList4th()
			},

			getList4th() {
				this.tabLoading = true
				return index_list4th(this.listParamsDialog4)
					.then(res => {
						let {
							data: {
								records,
								total
							}
						} = res;
						this.tableDataDialog4 = records;
						this.total4 = total;
						this.tabLoading = false;
					})
					.catch(() => {
						this.tabLoading = false
					})
			},

			getList3rd() {
				this.tabLoading = true
				return index_list3rd(this.listParamsDialog)
					.then(res => {
						let {
							data: {
								records,
								total
							}
						} = res;
						this.tableDataDialog = records;
						this.total = total;
						this.tabLoading = false;
					})
					.catch(() => {
						this.tabLoading = false
					})
			},

			// 重置搜索表单
			searchResetDialog() {
				this.$refs.searchFormDialog.resetFields()
				const params = this.$refs.searchFormDialog.model
				this.listParamsDialog = Object.assign(this.listParamsDialog, params)
				this.getList3rd()()
			},
			// 搜索
			searchSubmitDialog(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						const params = this.$refs[formName].model
						if (!params.name) params.name = null
						this.listParamsDialog.pageNum = 1
						this.current = 1
						this.listParamsDialog = Object.assign(this.listParamsDialog, params)
						this.getList3rd()
					} else {
						console.log('error submit!!')
						return false
					}
				})
			},
			
			// 重置搜索表单4
			searchResetDialog4() {
				this.$refs.searchFormDialog4.resetFields()
				const params = this.$refs.searchFormDialog4.model
				this.listParamsDialog4 = Object.assign(this.listParamsDialog4, params)
				this.getList4th()
			},
			// 搜索4
			searchSubmitDialog4(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						const params = this.$refs[formName].model
						if (!params.name) params.name = null
						this.listParamsDialog4.pageNum = 1
						this.current = 1
						this.listParamsDialog4 = Object.assign(this.listParamsDialog4, params)
						this.getList3rd()
					} else {
						console.log('error submit!!')
						return false
					}
				})
			},

			showAddDialog() {
				this.dialogCU = true
				this.dialogCULoading = false
				this.resetForm()
				this.cuForm.level = 3
				this.cuForm.pid = this.listParamsDialog.pid
				this.$refs['cuForm'] && this.$refs['cuForm'].resetFields()
			},
			
			showAddDialog4() {
				this.dialogCU = true
				this.dialogCULoading = false
				this.resetForm()
				this.cuForm.level = 4
				this.cuForm.pid = this.listParamsDialog4.pid
				this.$refs['cuForm'] && this.$refs['cuForm'].resetFields()
			},

			//带状态表格
			tableRowClassName({
				row
			}) {
				if (row.status === 0) {
					return "stop-row";
				}
				return "";
			},
		}
	}
</script>
<style scoped>
	.search .el-form-item:last-child {
		margin-left: 35px;
	}

	.el-date-editor>.el-range-separator {
		width: 8% !important;
	}

	.operation button {
		padding: 8px;
	}

	.el-pagination {
		margin-top: 40px;
	}

	ul.icon-list {
		overflow: hidden;
		list-style: none;
		padding: 0 !important;
		border: 1px solid #eaeefb;
		border-radius: 4px
	}

	.icon-list li {
		float: left;
		width: 16.99%;
		text-align: center;
		height: 60px;
		line-height: 60px;
		color: #666;
		font-size: 13px;
		border-right: 1px solid #eee;
		border-bottom: 1px solid #eee;
		margin-right: -1px;
		margin-bottom: -1px
	}

	.icon-list li span {
		font-size: 22px;
	}

	.icon-list li.action {
		color: #409EFF;
	}
</style>
<style lang="scss" scoped>
	.app-container {
		.el-table {
			margin-top: 20px;

			.adImg {
				width: 100%;
				object-fit: cover;
				border-radius: 4px;
			}
		}
	}
</style>
